<template>
    <div>
       <n-button @click = "showAddModel = true" >添加</n-button>
       <n-table :bordered="false" :single-line="false">
          <thead>
              <tr>
                 <th>序号</th>
                 <th>编号</th>
                 <th>名称</th>
                 <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="(category, index) in categoryList">
                 <td>{{ index }}</td>
                 <td>{{category.id}}</td>
                 <td>{{category.name}}</td>
                 <td>
                    <n-space>
                        <n-button @click="toUpdate(category)">修改</n-button>
                        <n-button @click="deleteCategory(category)">删除</n-button>
                    </n-space>
                 </td>
              </tr>
          </tbody>
       </n-table>

       <n-modal v-model:show="showAddModel" preset="dialog" title="Dialog">
            <template #header>
                <div>添加分类</div>
            </template>
            <div>
                <n-input v-model:value ="addCategory.name" type="text" placeholder="请输入名称"/>
            </div> 
            <template #action>
              <div>
                <n-button @click="add">提交</n-button>
              </div>
            </template>
        </n-modal>

        <n-modal v-model:show="showUpdateModel" preset="dialog" title="Dialog">
            <template #header>
                <div>修改分类</div>
            </template>
            <div>
                <n-input v-model:value ="updateCategory.name" type="text" placeholder="请输入名称"/>
            </div> 
            <template #action>
              <div>
                <n-button @click="update">提交</n-button>
              </div>
            </template>
        </n-modal>

    </div>
</template>

<script setup>

    import { AdminStore } from '../../stores/AdminStore'
    import { ref,reactive,inject ,onMounted } from 'vue';
    import { useRouter, useRoute } from 'vue-router'
    const router =  useRouter()
    const route = useRoute()

    const message = inject("message")
    const dialog = inject("dialog")
    const axios = inject("axios")


    const adminstore = AdminStore()


    // 是否显示组件 不显示
    const showAddModel = ref(false)
    const showUpdateModel = ref(false)

    const categoryList = ref([])
    const addCategory = reactive({
        name:""
    })

    // 修改数据
    const updateCategory = reactive({
        id:0,
        name:""

    })

    onMounted(()=>{
        loadDatas()

    })
   
    const loadDatas = async () =>{
        let res = await axios.get("/category/list")
        categoryList.value = res.data.rows
    }

    // 原始
     const add = async ()=>{
        
        // 原始版本
        // let res = await axios.post("/category/_token/add",{name:addCategory.name},{headers:{token:adminstore.token}})
        // 通过 main.js 添加 axios.interceptors.request.use()方法，在每次访问期间，将 headers 传入 token值
        // 代码优化如下
        let res = await axios.post("/category/_token/add",{name:addCategory.name})

        if(res.data.code == 200){
            // 添加成功
            loadDatas()
            message.info(res.data.msg)
        }
        else{
            // 未添加成功
            message.error(res.data.msg)
        }
        showAddModel.value = false
     }

     // 添加修改动作方法
     const toUpdate = async ( category ) =>{
        // 修改数据组件显示
        showUpdateModel.value = true
        updateCategory.id = category.id
        updateCategory.name = category.name
        

     }

     // 提交数据方法
     const update = async ()=>{

         let res = await axios.put("/category/_token/update",{id:updateCategory.id,name:updateCategory.name})

         if(res.data.code == 200){
            // 添加成功
            loadDatas()
            message.info(res.data.msg)
        }
        else{
            // 未添加成功
            message.error(res.data.msg)
        }
        // 隐藏
        showUpdateModel.value = false
     }


     const deleteCategory = async ( category ) => {
        // 添加删除消息确认功能

        dialog.warning({
           title:'警告',
           content:'是否要删除',
           positiveText:'确定',
           negativeText:'取消',
           onPositiveClick: async () =>{
               // 确定之后，才执行删除数据的操作

                // 获取博客删除数据信息
                // 这句化有问题
                let res = await axios.delete(`/category/_token/delete?id=${category.id}`)
 
                if(res.data.code == 200){
                    // 重新读取页面
                    loadDatas()
                    message.info(res.data.msg)
                }else{
                    message.error(res.data.msg)
                }

           },
           onNegativeClick: () =>{ }
        })
        



 


     }

</script>

<style lang="scss" scoped>

</style>